<script setup lang="ts">
const props = defineProps<{ data: string }>()

const colors: { [key: string]: string } = {
    'H5': 'orange',
    'VUE': 'green',
    "TYPESCRIPT": 'blue',
    "ANGULAR": 'red',
    "REACT": 'purple',
    "COLA": 'pink',
    "移动开发": 'teal',
    "DORADO": 'turquoise',
    "ES6": 'olive',
    "小程序": 'green'
}

const color = (tag: string): string => {
    const target: string | undefined = Object.keys(colors).find(_tag => {
        return (tag.toUpperCase()).indexOf(_tag) >= 0
    })
    return target ? colors[target] : 'gray'
}


</script>
<template>
    <div class="tag" :class="color(data)">{{ data }}</div>
</template>

<style scoped>
.tag {
    color: white;
    background-color: gray;
    display: inline-block;
    border-radius: 5px;
    padding: 2px 8px;
    margin: 4px;
}
.green {
    background-color: #12ac71;
}

.blue {
    background-color: #3d3db6;
}
.orange {
    background-color: orange;
}
.red {
    background-color: brown;
}
.purple {
    background-color: purple;
}
.pink {
    background-color: palevioletred;
}
.olive {
    background-color: olivedrab;
}
.turquoise {
    background-color: turquoise;
}
.teal {
    background-color: teal;
}
</style>